<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>结算管理</el-breadcrumb-item>
      <el-breadcrumb-item>渠道预收</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 财务信息 -->
    <Container
      class="u-mb15 u-pb0"
      v-show="financeData.length"
    >
      <el-row :gutter="20">
        <FinanceTotal
          :data="item"
          v-for="(item, index) in financeData"
          :key="index"
        ></FinanceTotal>
      </el-row>
    </Container>

    <Container class="u-mb15">
      <!-- filter -->
      <el-form
        class="m-form--filter"
        inline
      >
        <el-form-item>
          <el-date-picker
            class="u-w300"
            size="mini"
            v-model="dateValue"
            type="daterange"
            align="right"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateChange"
            format="yyyy/MM/dd"
            :picker-options="$store.state.PICKER_OPTIONS"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            class="u-w160"
            size="mini"
            v-model="channel_items.model_value"
            :placeholder="channel_items.placeHolder"
            filterable
            collapse-tags
          >
            <el-option
              v-for="item in channel_items.options"
              :key="item.channelCode"
              :label="item.name"
              :value="item.channelCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            class="u-w160"
            size="mini"
            collapse-tags
            filterable
            v-model="pay_items.model_value"
            :placeholder="pay_items.placeHolder"
          >
            <el-option
              v-for="item in $store.getters.cpaDingStatus"
              :key="item.id"
              :label="item.val"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="pageInfo"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </Container>

    <Container>
      <el-form
        class="m-table--handle"
        inline
      >
        <el-form-item>
          <el-input
            class="u-w160"
            v-model="billNo"
            size="mini"
            placeholder="请输入对账单编号"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="seeBill(billNo)"
          >搜索</el-button>
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form>

      <el-table
        :data="tableData"
        border
        stripe
      >
        <el-table-column
          v-for="(c, i) in filterTableColumn"
          :key="i"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          :formatter="c.format"
          :width="c.width"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <span
              @click.stop="seeBill(scope.row.billNo)"
              class="u-cursor u-mr10"
            >查看</span>
            <span
              @click.stop="deleteBill(scope.row.id)"
              class="u-cursor"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.currentPage"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, prev, pager, next, sizes, jumper"
        :total="page.count"
      >
      </el-pagination>
    </Container>

    <!-- 对账单 -->
    <el-dialog
      title="对账单"
      width="90%"
      :visible.sync="billStatus"
    >
      <el-form inline>
        <el-form-item label="客户主体：">{{params.owner}}</el-form-item>
        <el-form-item label="备注：">{{params.memo}}</el-form-item>
        <el-form-item>
          <el-button
            size="small"
            @click="importData"
          >下载对账单</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableDataBill"
        border
        stripe
        style="margin-bottom: 10px;"
      >
        <el-table-column
          v-for="(c, i) in tableColumn_bill_title"
          :key="i"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          :width="c.width"
          v-show="c.visible"
        >
        </el-table-column>
      </el-table>
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        :data="tableDataBillDetail"
        border
        stripe
      >
        <el-table-column
          v-for="(c, i) in tableColumn_bill_detail"
          :key="i"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          :width="c.width"
          v-show="c.visible"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
import CustomTableColumn from "@/components/custom-table-column";
import FinanceTotal from "@/components/finance-total";
export default {
  name: "cpa-final-channel-pay",
  components: {
    Container,
    CustomTableColumn,
    FinanceTotal
  },
  data() {
    return {
      loading: false,
      checked: true,
      billStatus: false,
      tableColumn: [
        // {fixed: false, prop: 'billNo', label: '对账单编号', sortable: false, visible: true},
        {
          prop: "createdDate",
          label: "对账日期",
          sortable: true,
          width: 120,
          visible: false
        },
        {
          prop: "city",
          label: "账目周期",
          visible: true,
          format: function(row) {
            return row.startDate + "-" + row.endDate;
          }
        },
        {
          prop: "channelName",
          label: "渠道名称",
          visible: true
        },
        {
          prop: "actualSettlementAmount",
          label: "结算金额",
          visible: false
        },
        {
          prop: "actualPrice",
          label: "核减金额",
          visible: false
        },
        {
          prop: "val_1",
          label: "抵扣款项",
          visible: true
        },
        {
          prop: "val_2",
          label: "抵扣后余额",
          width: 100,
          visible: true
        },
        {
          prop: "paymentStatus",
          label: "支付状态",
          visible: true
        },
        {
          prop: "memo",
          label: "备注",
          visible: true
        }
      ],

      citiesFilterVal: [
        "date",
        "channelName",
        "productName",
        "productChannelCode",
        "channelProductCode",
        "cooperateMode",
        "ajustmentAct",
        "price",
        "revenue",
        "upstreamSettlementStatus",
        "downstreamSettlementStatus"
      ],
      citiesFilter: [
        "日期",
        "渠道名称",
        "产品名称",
        "上游渠道号",
        "产品包渠道代码",
        "合作模式",
        "业务数据",
        "单价",
        "收入金额（元）",
        "上游结算状态",
        "下游结算状态"
      ],
      tableColumn_bill_detail: [
        {
          fixed: true,
          prop: "date",
          label: "日期",
          sortable: true,
          visible: true
        },
        {
          fixed: false,
          prop: "channelName",
          label: "渠道名称",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "productName",
          label: "产品名称",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "productChannelCode",
          label: "上游渠道号",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "channelProductCode",
          label: "产品包渠道代码",
          sortable: false,
          visible: true,
          width: 140
        },
        {
          fixed: false,
          prop: "cooperateMode",
          label: "合作模式",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "ajustmentAct",
          label: "业务数据",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "price",
          label: "单价",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "revenue",
          label: "收入金额（元）",
          sortable: false,
          visible: true,
          width: 120
        },
        {
          fixed: false,
          prop: "upstreamSettlementStatus",
          label: "上游结算状态",
          sortable: false,
          visible: true
        },
        {
          fixed: false,
          prop: "downstreamSettlementStatus",
          label: "下游结算状态",
          sortable: true,
          visible: true
        }
      ],
      tableColumn_bill_title: [
        {
          prop: "billNo",
          label: "结算单号",
          visible: true
        },
        {
          prop: "billDate",
          label: "结算单日期",
          visible: true
        },
        {
          prop: "customerName",
          label: "客户名称",
          visible: true
        },
        {
          prop: "startDate",
          label: "账目周期开始日期",
          visible: true
        },
        {
          prop: "endDate",
          label: "账目周期结束日期",
          visible: true
        },
        {
          prop: "actualCost",
          label: "结算金额（元）",
          visible: true
        }
      ],
      page: {
        sizes: [10, 50, 100, 500],
        offset: 1,
        limit: 10,
        count: 0,
        currentPage: 1,
        landpageName: ""
      },
      menu_nav: ["CPA数据管理", "渠道预付"],
      channel_items: {
        model_value: "",
        placeHolder: "渠道简称",
        options: []
      },
      pay_items: {
        model_value: "",
        placeHolder: "支付状态"
      },
      tableDataBill: [],
      tableDataBillDetail: [],
      tableData: [],
      billNo: "",
      dateValue: "",
      financeDateValue: "",
      financeData: [],
      params: {
        type: "2",
        val: "",
        startDate: "",
        endDate: "",
        memo: "",
        owner: ""
      }
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter(item => item.visible);
    }
  },
  filters: {
    toFixed: function(value) {
      if (!value) return "";
      value = Number(value);
      return value.toFixed(2);
    }
  },
  created() {
    this.channelSelect();
    this.financeInfo();
  },
  methods: {
    channelSelect() {
      /*渠道*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelSearch,
        params: {
          offset: 1,
          limit: 9999,
          val: ""
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.channel_items.options = data.items;
          }
        })
        .catch(() => {});
    },
    financeInfo() {
      /*财务*/
      this.$http({
        method: "get",
        url: this.apiUrl.financeInfoBill,
        params: {
          type: 2
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.financeData = [];
            for (let item of data.list) {
              if (item.billType == 5) {
                this.financeData.push(item);
              }
            }
          }
        })
        .catch(() => {});
    },
    pageInfo() {
      var params = {
        page: this.page.offset,
        limit: this.page.limit,
        type: this.params.type,
        billDate: this.params.startDate + ":" + this.params.endDate,
        channelCode: this.channel_items.model_value,
        paymentStatus: this.pay_items.model_value
      };
      if (this.channel_items.model_value == "") {
        delete params.channelCode;
      }
      if (this.pay_items.model_value == "") {
        delete params.paymentStatus;
      }
      this.loading = true;
      this.$http({
        method: "get",
        url: this.apiUrl.channelBillList,
        params: params
      })
        .then(res => {
          if (res.status === 200) {
            this.page.count = res.data.totalNums;
            res.data.itemList.forEach(item => {
              item.billMonth = new Date(item.createdDate).getMonth() + 1;
            });
            this.tableData = res.data.itemList;
          }
          this.loading = false;
        })
        .catch(() => {});
    },
    seeCusBill(billNo) {
      this.$http({
        method: "get",
        url: this.apiUrl.getChannelBill,
        params: {
          no: billNo
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.tableDataBill = [];
            this.params.memo = data.bill.memo;
            this.params.owner = data.bill.owner;
            this.tableDataBill.push(data.bill);
            this.tableDataBillDetail = data.realdatas;
          }
        })
        .catch(() => {});
    },
    seeBill(billNo) {
      this.seeCusBill(billNo);
      this.billStatus = true;
    },
    handleCurrentChange(val) {
      this.page.offset = val;
      this.pageInfo();
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.pageInfo();
    },
    seeEvent() {
      this.billStatus = true;
    },
    dateChange() {
      this.params.startDate = this.formatDateTime(this.dateValue[0], "ymd");
      this.params.endDate = this.formatDateTime(this.dateValue[1], "ymd");
    },
    importData() {
      if (this.tableDataBillDetail.length == 0) {
        this.$message({
          type: "info",
          message: "请查询数据"
        });
        return false;
      }
      let importData = this.tableDataBillDetail;
      let searchName = [this.params.memo, "对账单"];
      let fileName = searchName.join("_");
      this.handleDownload(
        this.citiesFilter,
        this.citiesFilterVal,
        importData,
        fileName
      );
    }
  }
};
</script>
